<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>产品结算</title>

  <link rel="stylesheet" href="static/css/bootstrap.min.css">
  <link rel="stylesheet" href="static/css/all.min.css">
    <link rel="stylesheet" href="static/css/themify-icons.css">
    <link rel="stylesheet" href="static/css/style1.css">
  <link rel="stylesheet" href="static/css/owl.theme.default.min.css">
  <link rel="stylesheet" href="static/css/owl.carousel.min.css">
  <link rel="stylesheet" href="static/css/nice-select.css">
  <link rel="stylesheet" href="static/css/nouislider.min.css">

  <link rel="stylesheet" href="static/css/style.css">
</head>
<body>
  <!--================ Start Header Menu Area =================-->
	<header class="header_area">
		<div class="main_menu">
		  <nav class="navbar navbar-expand-lg navbar-light">
			<div class="container " style="height: 90px;">
			  <a class="navbar-brand logo_h" href=""><img src="static/picture/logo.png" alt=""></a>
			  
			</div>
		  </nav>
		</div>
	  </header>
	<!--================ End Header Menu Area =================-->

	<!-- ================ start banner area ================= -->	
	<section class="blog-banner-area" id="category">
		<div class="container h-100">
			<div class="blog-banner">
				<div class="text-center">
					<h1>产品结账</h1>
					<nav aria-label="breadcrumb" class="banner-breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="#">首页</a></li>
              <li class="breadcrumb-item active" aria-current="page">结账</li>
            </ol>
          </nav>
				</div>
			</div>
    </div>
	</section>
	<!-- ================ end banner area ================= -->
  
  
  <!--================Checkout Area =================-->
  <section class="checkout_area section-margin--small">
    <div class="container">
        <div class="returning_customer">
            <div class="check_title">
                <h2>回头客? <a href="#">点击登录</a></h2>
            </div>
            <p>如果您之前在我们这里购物过，请在下面的框中输入您的详细信息。如果您是新客户，请前往“账单与配送”部分</p>
            <form class="row contact_form" action="#" method="post" novalidate="novalidate">
                <div class="col-md-6 form-group p_star">
                    <input type="text" class="form-control" placeholder="用户名或者电子邮件*" onfocus="this.placeholder=''" onblur="this.placeholder = 'Username or Email*'" id="name" name="name">
                    <!-- <span class="placeholder" data-placeholder="Username or Email"></span> -->
                </div>
                <div class="col-md-6 form-group p_star">
                    <input type="password" class="form-control" placeholder="密码*" onfocus="this.placeholder=''" onblur="this.placeholder = 'Password*'" id="password" name="password">
                    <!-- <span class="placeholder" data-placeholder="Password"></span> -->
                </div>
                <div class="col-md-12 form-group">
                    <button type="submit" value="submit" class="button button-login">登陆</button>
                    <div class="creat_account">
                        <input type="checkbox" id="f-option" name="selector">
                        <label for="f-option">记住密码</label>
                    </div>
                    <a class="lost_pass" href="#">忘记密码?</a>
                </div>
            </form>
        </div>
        <div class="cupon_area">
            <div class="check_title">
                <h2>有优惠卷吗? <a href="#">点击输入您的兑换码</a></h2>
            </div>
            <input type="text" placeholder="请输入兑换码">
            <a class="button button-coupon" href="#">使用优惠卷</a>
        </div>
        <div class="billing_details">
            <div class="row">
                <div class="col-lg-8">
                    <h3>结算明细</h3>
                    <form class="row contact_form" action="#" method="post" novalidate="novalidate">
                        <div class="col-md-12 form-group">
                            <input type="text" class="form-control" id="company" name="company" placeholder="公司名称">
                        </div>
                        <div class="col-md-12 form-group p_star">
                            <select class="country_select">
                                <option value="1">北京</option>
                                <option value="2">四川</option>
                                <option value="4">重庆</option>
                            </select>
                        </div>
                        <div class="col-md-12 form-group p_star">
                            <select class="country_select">
                                <option value="1">昌平</option>
                                <option value="2">大兴</option>
                                <option value="4">延庆</option>
                            </select>
                        </div>
                        <div class="col-md-12 form-group">
                            <input type="text" class="form-control" id="zip" name="zip" placeholder="邮政编码/编号">
                        </div>
                        
                    </form>
                </div>
                <div class="col-lg-4">
                    <div class="order_box">
                        <h2>您的订单</h2>
                        <ul class="list">
                            <li><a href="#"><h4>产品 <span>全部</span></h4></a></li>
                            <li><a href="#">产品名称 <span class="middle">x 02</span> <span class="last">$720.00</span></a></li>
                            <li><a href="#">Fresh Tomatoes <span class="middle">x 02</span> <span class="last">$720.00</span></a></li>
                            <li><a href="#">Fresh Brocoli <span class="middle">x 02</span> <span class="last">$720.00</span></a></li>
                        </ul>
                        <ul class="list list_2">
                            <li><a href="#">小计 <span>$2160.00</span></a></li>
                            <li><a href="#">运费 <span>运费支付: $50.00</span></a></li>
                            <li><a href="#">共计 <span>$2210.00</span></a></li>
                        </ul>
                       
                        <div class="creat_account">
                            <input type="checkbox" id="f-option4" name="selector">
                            <label for="f-option4">我已阅读并接受 </label>
                            <a href="#">条款和条约</a>
                        </div>
                        <div class="text-center">
                          <a class="button button-paypal" href="#">继续支付</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </section>
  <!--================End Checkout Area =================-->



  <!--================ Start footer Area  =================-->	
	<footer class="footer">
		<div class="footer-area">
			<div class="container">
				<div class="row section_gap">
					<div class="col-lg-3 col-md-6 col-sm-6">
						<div class="single-footer-widget tp_widgets">
							<h4 class="footer_title large_title">我们的任务</h4>
                            <p>
								新年已来到，向你问个好。开心无烦恼，好运跟着跑。家人共团聚，天伦乐逍遥。朋友相扶持，心情不寂寥。
							</p>
							<p>
                                事业风水顺，金银撑荷包。祝生活开心步步高！
							</p>
						</div>
					</div>
					<div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6">
						<div class="single-footer-widget tp_widgets">
							<h4 class="footer_title">快速链接 </h4>
							<ul class="list">
								<li><a href="#">家</a></li>
								<li><a href="#">店铺</a></li>
								<li><a href="#">博客</a></li>
								<li><a href="#">产品</a></li>
								<li><a href="#">品牌</a></li>
								<li><a href="#">联系我们</a></li>
							</ul>
						</div>
					</div>
					<div class="col-lg-2 col-md-6 col-sm-6">
						<div class="single-footer-widget instafeed">
							<h4 class="footer_title">风格</h4>
							<ul class="list instafeed d-flex flex-wrap">
								<li><img src="static/picture/r1.jpg" alt=""></li>
								<li><img src="static/picture/r2.jpg" alt=""></li>
								<li><img src="static/picture/r3.jpg" alt=""></li>
								<li><img src="static/picture/r5.jpg" alt=""></li>
								<li><img src="static/picture/r7.jpg" alt=""></li>
								<li><img src="static/picture/r8.jpg" alt=""></li>
							</ul>
						</div>
					</div>
					<div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6">
						<div class="single-footer-widget tp_widgets">
							<h4 class="footer_title">联系我们</h4>
							<div class="ml-40">
								<p class="sm-head">
									<span class="fa fa-location-arrow"></span>
									总公司
								</p>
								<p>北京市新晨股份有限公司</p>
	
								<p class="sm-head">
									<span class="fa fa-phone"></span>
									联系电话
								</p>
								<p>
									+123 456 7890 <br>
									+123 456 7890
								</p>
	
								<p class="sm-head">
									<span class="fa fa-envelope"></span>
									电子邮件
								</p>
								<p>
									free@infoexample.com <br>
									www.infoexample.com
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="footer-bottom">
			<div class="container">
				<div class="row d-flex">
					<p class="col-lg-12 footer-text text-center">
                        增值电信业务经营许可证;XXXX    市场名称登记证;XXXXX      出版物网络交易平台服务经营备案证;****************
				</div>
			</div>
		</div>
	</footer>
	<!--================ End footer Area  =================-->


</body>
</html>